<template>
    <div class="house-list-item" :class="{ 'reverse': reverse }">
        <!-- 左侧：房源信息 -->
        <div class="left-info">
            <!-- 经纪人信息 -->
            <div class="agent-info">
                <img :src="agentAvatar" :alt="house.agentName" class="agent-avatar" />
                <span class="agent-name">{{ house.agentName }}</span>
                <div class="actions">
                    <button class="action-btn">
                        <svg-icon name="house/info/link" />
                    </button>
                    <button class="action-btn">
                        <svg-icon name="house/info/favorite" />
                    </button>
                    <button class="action-btn">
                        <svg-icon name="house/info/minimize" />
                    </button>
                </div>
            </div>

            <!-- 房源地址 -->
            <h3 class="address clickable" @click="handleClick">{{ house.address }}</h3>

            <!-- 房源描述 -->
            <div class="description">
                <p>{{ house.description || '暂无描述' }}</p>
                <span class="read-more">查看更多...</span>
            </div>

            <!-- 价格信息 -->
            <div class="price">
                <span class="amount">￥ {{ formatPrice(house.price) }}</span>
            </div>
        </div>

        <!-- 右侧：房源图片 -->
        <div class="right-image">
            <img :src="coverImage" :alt="house.title" class="house-img" @click="handleClick" />
            <div class="house-meta">
                <!-- 这里是房源的关键信息 -->
                <div class="meta-item">
                    <svg-icon name="house/info/bedroom" />
                    <span>{{ house.bedroom }} 室</span>
                </div>
                <div class="meta-item">
                    <svg-icon name="house/info/area" />
                    <span>{{ house.area }} m²</span>
                </div>
                <div class="meta-item">
                    <svg-icon name="house/info/face" />
                    <span>{{ house.orientation }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.house-list-item {
    display: grid;
    grid-template-columns: 1fr 760px;
    gap: 100px;
    position: relative;
    width: 1320px;
    border-radius: 8px;
    margin-bottom: 100px;

    &:last-child {
        margin-bottom: 0;
    }

    &.reverse {
        grid-template-columns: 760px 1fr;

        .left-info {
            order: 2;
            padding: 46px 0 46px 24px;
        }

        .right-image {
            order: 1;

            .house-meta {
                right: auto;
                left: -53px;
            }
        }
    }
}

.left-info {
    padding: 46px 24px 46px 0;
    display: flex;
    flex-direction: column;
    width: 520px;

    .agent-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
        width: 100%;

        .agent-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .agent-name {
            font-size: 14px;
            color: #2F3B59;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .actions {
            margin-left: auto;
            display: flex;
            gap: 12px;
            flex-shrink: 0;

            .action-btn {
                width: 30px;
                height: 30px;
                border: none;
                background: #EDEFF6;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s;

                .svg-icon {
                    width: 22px;
                    height: 22px;
                    color: #4A60A1;
                }

                &:hover {
                    background: var(--light-hover);
                }
            }
        }
    }

    .address {
        font-size: 24px;
        font-weight: 600;
        color: #2F3B59;
        margin-bottom: 16px;
        cursor: pointer;

        &:hover {
            color: #4A60A1;
        }
    }

    .description {
        color: #6D737A;
        line-height: 1.6;
        margin-bottom: 24px;
        flex-grow: 1;

        .read-more {
            color: #4A60A1;
            cursor: pointer;
            margin-left: 4px;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .price {
        .amount {
            font-size: 24px;
            font-weight: 600;
            color: #4A60A1;
        }
    }
}

.right-image {
    position: relative;
    width: 760px;
    height: 450px;

    .house-img {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 0;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        &:hover img {
            transform: scale(1.05);
        }
    }

    .house-meta {
        position: absolute;
        right: -53px;
        bottom: 28px;
        width: 374px;
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(74, 96, 161, 0.12);
        backdrop-filter: blur(8px);
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(74, 96, 161, 0.08);
        z-index: 1;

        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #4A60A1;

            .svg-icon {
                width: 20px;
                height: 20px;
                color: #4A60A1;
            }
        }
    }
}
</style>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { getFullImageUrl } from '@/utils/imageUrl'

const props = defineProps({
    house: {
        type: Object,
        required: true
    },
    reverse: {
        type: Boolean,
        default: false
    }
})

const router = useRouter()

const handleClick = () => {
    router.push(`/house/detail/${props.house.houseId}`)
}

const formatPrice = (price) => {
    return price ? price.toLocaleString() : '0'
}

// 处理封面图片
const coverImage = computed(() => {
    // 如果有封面图，使用封面图
    if (props.house.coverImage) {
        return getFullImageUrl(props.house.coverImage);
    }
    
    // 如果有images数组且不为空，使用第一张图片
    if (props.house.images && props.house.images.length > 0) {
        const firstImage = props.house.images[0];
        if (typeof firstImage === 'string') {
            return getFullImageUrl(firstImage);
        } else if (firstImage.imageUrl) {
            return getFullImageUrl(firstImage.imageUrl);
        }
    }
    
    // 如果既没有封面图也没有其他图片，使用默认图片
    return '/images/house/default-house.jpg';
})

// 处理经纪人头像
const agentAvatar = computed(() => {
    return getFullImageUrl(props.house.agentAvatar) || '/images/agent/avatar-default.png';
})
</script> 